{% extends "admin/base_site.html" %}
{% load i18n static %}

{% block content %}
<div class="k4w-page-shell k4w-demo-wp-page">
  <section class="k4w-hero k4w-hero--dark">
    <div>
      <p class="k4w-eyebrow">INFRAESTRUTURA · DADOS FICTÍCIOS</p>
      <h1>Dados de demonstração WordPress</h1>
      <p>Crie sites WordPress, plugins, temas, certificados SSL, backups e monitores sem limpar o resto da base de dados.</p>
    </div>
    <div class="k4w-hero-badge"><span class="material-symbols-outlined">science</span> Apenas testes</div>
  </section>

  <div class="k4w-metric-grid k4w-metric-grid--five">
    <article class="k4w-metric"><span class="material-symbols-outlined">web</span><div><strong>{{ counts.sites }}</strong><small>Sites WordPress</small></div></article>
    <article class="k4w-metric"><span class="material-symbols-outlined">extension</span><div><strong>{{ counts.plugins }}</strong><small>Plugins</small></div></article>
    <article class="k4w-metric"><span class="material-symbols-outlined">palette</span><div><strong>{{ counts.themes }}</strong><small>Temas</small></div></article>
    <article class="k4w-metric"><span class="material-symbols-outlined">lock</span><div><strong>{{ counts.ssl }}</strong><small>Certificados SSL</small></div></article>
    <article class="k4w-metric"><span class="material-symbols-outlined">monitor_heart</span><div><strong>{{ counts.monitors }}</strong><small>Monitores</small></div></article>
  </div>

  <section class="k4w-panel">
    <div class="k4w-panel__header">
      <div><p class="k4w-eyebrow">CONTEÚDO CRIADO</p><h2>Cenários técnicos variados</h2></div>
    </div>
    <div class="k4w-feature-grid">
      <div><span class="material-symbols-outlined">health_and_safety</span><strong>Saudável</strong><p>WordPress atualizado, SSL válido e monitor operacional.</p></div>
      <div><span class="material-symbols-outlined">warning</span><strong>Atenção</strong><p>Atualizações pendentes, resposta lenta e licença próxima do fim.</p></div>
      <div><span class="material-symbols-outlined">gpp_bad</span><strong>Crítico</strong><p>Plugins vulneráveis, backup falhado, SSL expirado e incidente aberto.</p></div>
      <div><span class="material-symbols-outlined">construction</span><strong>Manutenção</strong><p>Site em janela técnica, monitor pausado e multisite.</p></div>
    </div>
  </section>

  <section class="k4w-panel k4w-panel--danger-soft">
    <div class="k4w-panel__header">
      <div><p class="k4w-eyebrow">AÇÕES</p><h2>Gerir a demonstração</h2></div>
    </div>
    <p>Estas ações afetam apenas registos assinalados com <code>{{ marker }}</code>. Não eliminam clientes ou serviços reais.</p>
    <form method="post" class="k4w-demo-actions">
      {% csrf_token %}
      <label>
        <span>Confirmação</span>
        <input type="text" name="confirmation" placeholder="DADOS DEMO WORDPRESS" autocomplete="off" required>
      </label>
      <div class="k4w-action-row">
        <button class="button k4w-btn k4w-btn--primary" name="action" value="seed" type="submit"><span class="material-symbols-outlined">add_circle</span>Criar / completar dados</button>
        <button class="button k4w-btn k4w-btn--warning" name="action" value="reset" type="submit"><span class="material-symbols-outlined">restart_alt</span>Recriar demonstração</button>
        <button class="button k4w-btn k4w-btn--danger" name="action" value="clear" type="submit"><span class="material-symbols-outlined">delete_sweep</span>Eliminar dados demo</button>
      </div>
    </form>
  </section>
</div>
{% endblock %}